<template>
  <div>
    <el-row :gutter="12" type="flex">
      <el-col>
        <el-card shadow="always" class="bg-logo bg-logo-left" >
          <div slot="header" style="text-align: center">
            单选
          </div>

          <selector ref="s" v-model="id" :data="data"></selector>
          <el-button @click="view1_click">查看值!</el-button>
          <el-button @click="set1_click">设置数据!</el-button>
          <el-button @click="view11_click">查看值1!</el-button>
          <el-button @click="view10_click">查看原始值!</el-button>
        </el-card>
      </el-col>

      <el-col>
        <el-card shadow="always" class="bg-logo bg-logo-left" >
          <div slot="header" style="text-align: center">
            多选
          </div>

          <selector ref="s2" v-model="id2" multi :data="data"></selector>
          <el-button @click="view2_click">查看值!</el-button>
          <el-button @click="set2_click">设置数据!</el-button>
          <el-button @click="view21_click">查看值1!</el-button>
          <el-button @click="view20_click">查看原始值!</el-button>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script type="text/ecmascript-6">

export default {
  data: function () {
    return {
      data: ["b", "c"],
      id: "a",
      id2:["a"]
    }
  },
  async mounted() {

  },
  methods: {
    set1_click() {
      this.data = ["a", "b"]
    },
    view1_click() {
      jv.info(this.id)
    },
    view11_click() {
      jv.info(this.$refs.s.getInnerValue())
    },
    view10_click() {
      jv.info(this.$refs.s.getUserSetValue())
    },

    set2_click() {
      this.data = ["a", "b"]
    },
    view2_click() {
      jv.info(this.id2)
    },
    view21_click() {
      jv.info(this.$refs.s2.getInnerValue())
    },
    view20_click() {
      jv.info(this.$refs.s2.getUserSetValue())
    }
  }
}
</script>